<!-- 直播预告 -->
<template>
    <div class="notice">
        <div class="title f15">
            <i class="line fl"></i>
            <span class="fl">直播预告</span>
        </div>
        <!-- 日期列表 -->
        <div class="datePicker f13">
      <span
          class="time fl"
          :class="[
          timeClass == index ? 'on' : '',
          index == timeDate.length - 1 ? 'hide' : '',
        ]"
          v-for="(item, index) in timeDate"
          :key="index"
          @click="onSwitchDate(index, item)"
      >{{ item.substring(5, 10) }}</span
      >
        </div>
        <!-- 预告列表 -->
        <div class="teacherList">
            <div class="center noneData" v-show="noticeData.length == 0"></div>
            <div
                class="teacher"
                v-for="(item, index) in noticeData"
                :key="index"
                @click="onVideoClick(item)"
            >
                <div class="img">
                    <img
                        :src="item.wholeCoverPath"
                        alt
                        @error="errorHandle($event, item.wholeImage)"
                    />
                </div>
                <div class="userInfo">
                    <span class="f24">{{ item._beginTimeStr }}</span>
                    <span class="f24">{{ item._timeQuantum }}</span>
                </div>
                <i class="icon" :class="'icon' + item._status"></i>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
import time from "../script/timeDate";
import runOnTime from "../script/runOnTime";
import {openWeb,windowOpen} from "@/common/common";

export default {
    data() {
        return {
            timeDate: time(),
            timeClass: 0,
            timer: null,
        };
    },
    computed: {
        ...mapState(["noticeData"]),
    },
    mounted() {
        setTimeout(() => {
            this.detectPlay();
        }, 100);
        this.start();
        this.getInitData();
    },
    methods: {
        start() {
            //启动计时器函数----刷新直播预告状态，每10分钟刷新一次
            if (this.timer != null) {
                //判断计时器是否为空
                clearInterval(this.timer);
                this.timer = null;
            }
            this.timer = setInterval(() => {
                this.getInitData();
            }, 600000);
        },
        //直播到时间播放视频
        async getInitData() {
            const beginTimeStr = this.timeDate[0].substring(0, 10);
            const endTimeStr = this.timeDate[1].substring(0, 10);
            const params = {beginTimeStr, endTimeStr};
            const data = await this.$store.dispatch("getNoticeList", params);
            if (data.length <= 0) return;
            this.start();
            try {
                //定时运行
                runOnTime.add({
                    times: [data[0].beginTimeStr, data[0].endTimeStr],
                    delay: 60,
                    callback: () => {
                        this.$store.dispatch("getNoticeList", params);
                    },
                });
            } catch (e) {
                //...
            }
        },
        errorHandle(e, src) {
            e.target.src = src;
        },
        // 检查URL是否存在播放视频指令
        detectPlay() {
            const matchPlayId = window.location.href.match(/playId=(\w+)/);
            if (matchPlayId) {
                const id = matchPlayId[1];
                const data = this.noticeData.find((item) => {
                    return item.channelId == id && item.status == 1;
                });
                window.reportParams = {
                    id: data.channelId,
                    cateId: data.configId,
                    videoName: data.channelName,
                    planTime: data.beginTime,
                };
                this.$store.commit("playVideo", {id: data.channelId, isLiving: true});
            }
        },
        //切换日期
        onSwitchDate(val, item) {
            const num = item.substring(0, 10);
            const num1 = this.timeDate[val + 1].substring(0, 10);
            this.timeClass = val;
            this.$store.dispatch("getNoticeList", {
                beginTimeStr: num,
                endTimeStr: num1,
                play: false,
            });
        },
        //播放预告
        onVideoClick(data) {

            if (!navigator.onLine) return this.$toast("网络连接失败，请检查网络设置");
            if (data.status != 1) {
                this.$toast.fail("直播尚未开始");
                return;
            }

            if(data.liveLink != ''){
                windowOpen(data.liveLink);
                return ;
            }

            const id = data.channelId;
            window.reportParams = {
                id,
                cateId: data.configId,
                videoName: data.channelName,
                planTime: data.beginTime,
            };
            this.$store.commit("playVideo", {id, isLiving: true});
        },
    },
};
</script>
